<template>
  <div class="p-4 md:p-6 space-y-8">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">党支部信息</h3>
      <n-descriptions label-placement="left" bordered :column="4" size="medium" class="custom-descriptions">
        <n-descriptions-item label="支部名称" :span="2">
          <n-ellipsis style="max-width: 200px">
            {{ branchData.branchName || '未填写' }}
          </n-ellipsis>
        </n-descriptions-item>
        <n-descriptions-item label="支部类型" :span="2">{{ branchData.branchType || '未填写' }}</n-descriptions-item>
        <n-descriptions-item label="支部描述" :span="4">
          <n-ellipsis style="max-width: 500px; line-height: 1.5;">
            {{ branchData.branchDescription || '无' }}
          </n-ellipsis>
        </n-descriptions-item>
      </n-descriptions>
    </div>

    <div>
      <h3 class="text-lg font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">核心数据一览</h3>
      <n-grid cols="2 s:3 m:4 l:4" responsive="screen" :x-gap="16" :y-gap="16">
        <n-grid-item v-for="stat in statistics" :key="stat.label">
          <n-card class="h-full" hoverable>
            <div class="flex items-center">
              <n-icon :component="stat.icon" size="32" class="mr-4 text-gray-500" />
              <div>
                <div class="text-2xl font-bold text-gray-800">{{ stat.value }}</div>
                <div class="text-sm text-gray-500">{{ stat.label }}</div>
              </div>
            </div>
          </n-card>
        </n-grid-item>
      </n-grid>
    </div>

    <div>
      <h3 class="text-lg font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">当前支委组成</h3>
      <div v-if="currentCommittee && currentCommittee.committeeMembers && currentCommittee.committeeMembers.length > 0">
        <n-grid cols="1 s:2 m:3 l:4" responsive="screen" :x-gap="16" :y-gap="16">
          <n-grid-item v-for="member in currentCommittee.committeeMembers" :key="member.memberId">
            <n-card class="h-full text-center" hoverable>
              <n-avatar class="mx-auto" size="large" round>
                <n-icon size="28"><PersonOutline /></n-icon>
              </n-avatar>
              <div class="text-lg font-semibold mt-3">{{ member.memberName }}</div>
              <n-tag :bordered="false" type="info" size="small" class="mt-1 mb-3">
                {{ member.positionHeld }}
              </n-tag>
              <div class="text-sm text-gray-500 flex items-center justify-center">
                <n-icon size="16" class="mr-1"><CallOutline /></n-icon>
                <span>{{ member.phoneNumber || '暂无联系方式' }}</span>
              </div>
            </n-card>
          </n-grid-item>
        </n-grid>
      </div>
      <div v-else>
        <n-card>
          <div class="text-center py-8 text-gray-500 flex flex-col items-center">
            <n-icon size="48" class="mb-4 text-gray-300"><InformationCircleOutline /></n-icon>
            <span>暂无当前支委信息</span>
          </div>
        </n-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  NDescriptions,
  NDescriptionsItem,
  NGrid,
  NGridItem,
  NCard,
  NIcon,
  NAvatar,
  NTag,
  NEllipsis
} from 'naive-ui'
import { computed, h } from 'vue'
import {
  PeopleOutline,
  PersonAddOutline,
  PersonOutline,
  WalkOutline,
  CalendarOutline,
  PodiumOutline,
  PeopleCircleOutline,
  CallOutline,
  InformationCircleOutline
} from '@vicons/ionicons5'

const props = defineProps({
  branchData: {
    type: Object,
    default: () => ({})
  }
})

// --- 计算统计数据 ---

// 党员相关统计
const formalMemberCount = computed(() => {
  // 实际项目中应根据党员状态字段(e.g. member.status === 'formal')过滤
  return (props.branchData.currentMembers || []).filter(m => m.status === '正式党员').length
})
const probationaryMemberCount = computed(() => {
  // 实际项目中应根据党员状态字段(e.g. member.status === 'probationary')过滤
  return (props.branchData.currentMembers || []).filter(m => m.status === '预备党员').length
})
const activistCount = computed(() => {
  // 实际项目中应根据党员状态字段(e.g. member.status === 'activist')过滤
  return (props.branchData.currentMembers || []).filter(m => m.status === '入党积极分子').length
})
const totalMemberCount = computed(() => {
  return (props.branchData.currentMembers || []).length
})

// 活动与组织相关统计
const activityCount = computed(() => {
  return (props.branchData.branchActivities || []).length
})
const committeeCount = computed(() => {
  return (props.branchData.branchCommittees || []).length
})
const currentCommittee = computed(() => {
  const committees = props.branchData.branchCommittees || []
  return committees.find(c => !c.endDate) // 查找没有结束日期的，即为当前届
})
const currentCommitteeCount = computed(() => {
  return currentCommittee.value ? (currentCommittee.value.committeeMembers || []).length : 0
})

// 将统计数据整合为一个数组，方便在模板中循环渲染
const statistics = computed(() => [
  { label: '党员总数', value: totalMemberCount.value, icon: h(PeopleOutline) },
  { label: '正式党员', value: formalMemberCount.value, icon: h(PersonOutline) },
  { label: '预备党员', value: probationaryMemberCount.value, icon: h(PersonAddOutline) },
  { label: '入党积极分子', value: activistCount.value, icon: h(WalkOutline) },
  { label: '活动总数 (次)', value: activityCount.value, icon: h(CalendarOutline) },
  { label: '支委换届 (届)', value: committeeCount.value, icon: h(PodiumOutline) },
  { label: '当前支委 (人)', value: currentCommitteeCount.value, icon: h(PeopleCircleOutline) },
])

</script>

<style scoped>
.custom-descriptions :deep(.n-descriptions-item-label) {
  padding: 12px 16px;
  font-weight: 500;
}

.custom-descriptions :deep(.n-descriptions-item-content) {
  padding: 12px 16px;
}
</style>